<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>诗词</title>
    <style>
        .jp-zhong {
            color: green;
            font-weight: bold;
        }

        .jp-jgao {
            color: #FF7F27;
            font-weight: bold;
        }

        .jp-err {
            color: #ff3333;
            font-weight: bold;
        }

        .shiResult {
            font-size: 18px;
        }

        html, body {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-x: hidden;
            overflow-y: auto;
        }

        div, textarea {
            box-sizing: border-box;
        }

        .base-page {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .base-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 40px;
            line-height: 40px;
            background-color: #007bff;
            color: white;
            text-align: center;
            z-index: 999;
        }

        @media only screen and (min-width: 320px) {
            .base-content {
                position: relative;
                margin: 0 auto;
                padding: 10px;
                top: 40px;
                word-break: break-all;
            }

            .base-content::-webkit-scrollbar {
                display: none;
            }

        }

        @media only screen and (min-width: 720px) {
            .base-content {
                position: relative;
                width: 480px;
                margin: 0 auto;
                padding: 10px;
                top: 40px;
                word-break: break-all;
            }

        }

        .btn-primary {
            display: inline-block;
            box-sizing: content-box;
            padding: 8px 16px;
            text-align: center;
            text-align: center;
            color: white;
            border-radius: 5px;
            background-color: #007bff;
        }

        .test-input-wrap {
            margin-top: 10px;
        }

        .test-input-wrap textarea {
            width: 100%;
            height: 150px;
            font-size: 14px;

        }

        .clear-float:after {
            content: "";
            display: block; /*让生成的元素以块级元素显示，占满剩余空间*/
            height: 0; /*避免生成的内容破坏原有布局高度*/
            clear: both; /*清除浮动*/
            visibility: hidden; /*让生成的内容不可见*/
        }

        .clear-float {
            zoom: 1; /*为IE6，7的兼容性设置*/
        }

        .result-title {
            font-size: 14px;
            float: left;
            display: none;
        }

        .result-des {
            text-align: left;
            margin-top: 10px;
        }

        .duoyin-bar {
            color: #FF7F27;
            box-sizing: content-box;
            padding: 10px 10px 5px 10px;
            border-bottom: 1px solid #C6D8F9;
            font-weight: bold;
        }

        .duoyin-con {
            box-sizing: content-box;
            border-bottom: 1px solid #C6D8F9;
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="base-page">
    <div class="base-bar">格律测试</div>
    <div class="base-content">

        <div class="test-input-wrap clear-float">
            <div>
                <textarea id="shiTextArea"></textarea>
            </div>
            <div class="btn-primary" style="float: right" onclick="clickCheckButton()">分析</div>
        </div>

        <div>
            <div class="clear-float">
                <div class="result-title">分析结果：</div>
            </div>
            <!--<pre id="shiResult"></pre>-->
            <div id="shiResult"></div>

            <div class="result-des"></div>
        </div>

    </div>
</div>
<script src="GeLvUtil.js" type="text/javascript"></script>
<script>
    // import {GeLvUtil, yunShuPingShuiJson} from "./GeLvUtil";

    function JsonFetch() {
        JsonFetch.prototype.get = function (url, onSuccess, onError) {
            let xhr = new XMLHttpRequest()
            xhr.responseType = 'json'
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        onSuccess(xhr.response)
                    } else {
                        onError(xhr.response)
                    }
                }
            }
            xhr.open("GET", url, true)
            xhr.send(null)
        }
    }


    let checker = new GeLvUtil(yunShuPingShuiJson)
    //
    // (function () {
    //     let jsonFetch = new JsonFetch();
    //     jsonFetch.get('map4.json',
    //         function (res) {
    //             checker = new CheckUtil(res)
    //         },
    //         function (error) {
    //             console.error(error)
    //         });
    //
    // })();
    //

    function clickCheckButton(e) {
        let elShiTextArea = document.getElementById("shiTextArea");
        let elShiResult = document.getElementById("shiResult");
        checker.checkGeLv(elShiTextArea.value)
    }

</script>

</body>
</html>